<template>
  <div style="position: relative;">

    <cus-allcard :loading="form.loading"
                 style="padding-bottom:10px;position: relative;"
                 :showTitle="false">
      <div>

      </div>
      <div class="topBody">
        <div class="topBodyItem">
          <cus-Button class="mr_10"
                      type="primary"
                      @onClick="dataInitializationButton"
                      v-permission="20">数据初始化</cus-Button>
        </div>

      </div>
    </cus-allcard>

    <cus-modal width="800"
               ref="isShowDataInitialization"
               title="数据初始化"
               @onOk="dataInitializationOk"
               okTextName="继续初始化"
               cancelTextName="取消"
               :maskclosable="false">
      <Spin fix
            v-if="form.loading">
        <Icon type="ios-loading"
              size=18
              class="demo-spin-icon-load"></Icon>
        <div>正在初始化，请稍等...</div>
      </Spin>
      <span>数据一但进行初始化，将会把系统数据还原回初始状态，一切新添加的数据将被抹除，请确认是否继续？</span>
    </cus-modal>
    <!-- 打印功能 -->
    <!-- <div class="topBodyItem">
          <cus-Button class="mr_10"
                      type="primary"
                      @onClick="printFee"
                      v-permission="20">打印测试</cus-Button>
        </div> -->
    <!-- <div id="exportableTable"
         style="display: none;">
      <table border="1"
             style="border-collapse:collapse;width: 100%;text-align: center;">
        <tr rowspan="2">
          <th colspan="7">经费账(科目：)</th>
        </tr>
        <tr cospan="7">
          <th rowspan="2">日期</th>
          <th rowspan="1">凭证</th>
          <th rowspan="2">摘要</th>
          <th rowspan="2">收方</th>
          <th rowspan="2">付方</th>
          <th rowspan="2">收或付</th>
          <th rowspan="2">余额</th>
        </tr>
        <tr cospan="7">
          <th rowspan="1">顺序号</th>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
        </tr>
      </table>
    </div> -->
  </div>
</template>
<script>
import { dataInitialization } from '@/api/businessAccountingApi/essentialInformationApi'
export default {
  data () {
    return {
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
    }
  },
  mounted () {

  },

  methods: {
    // 数据初始化 接口
    dataInitializationApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        dataInitialization().then((res) => {
          this.form.loading = false
          if (res.retCode === 0) {
            this.$refs['isShowDataInitialization'].show = false //打开交接记录弹框
            this.$Message.success(res.retMsg)
            resolve()
          } else {
            this.$Message.error(res.retMsg)
          }
        })
      })
    },
    // 数据初始化弹框确定按钮
    dataInitializationOk () {
      this.dataInitializationApi()// 数据初始化 接口
    },
    // 数据初始化按钮
    dataInitializationButton () {
      this.$refs['isShowDataInitialization'].show = true //打开交接记录弹框
    },
    // 打印功能
    // printFee () {
    //   const printContent = document.getElementById("exportableTable");
    //   // window.open() 弹出窗口
    //   const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//弹出一个空的窗口（设置好宽高）

    //   // write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析
    //   WindowPrt.document.write(printContent.innerHTML);

    //   // 运行document.write()，运行完后，最好手动关闭文档写入document.close()
    //   WindowPrt.document.close();

    //   //方法将焦点设置到当前窗口，也就是将窗口显示在前（靠近屏幕）
    //   WindowPrt.focus();

    //   // 调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。
    //   WindowPrt.print();

    //   // window.close()关闭浏览器窗口
    //   WindowPrt.close();
    // }
  }
}
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  padding-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    margin-right: 12px;
    margin-bottom: 14px;
    .itemSpan {
      white-space: nowrap;
    }
    .itemImport {
      width: 200px;
    }
  }
}
/* 旋转效果 */
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
.ivu-spin-fix {
  overflow: auto;
  // position: fixed;
}
</style>
